<template>
    <div>
        <SchemaForm v-model="searchForm" :columns="columns" @searchHandle="searchHandle" @handleReset="resetHandle"> </SchemaForm>
    </div>
</template>

<script lang="ts" setup>
import SchemaForm from '@/components/SchemaForm.vue'
import { SearchProps } from '@/components/types'

const $emit = defineEmits(['searchParams'])
const searchForm = reactive({
    no: '',
    name: '',
    status: '',
    shopType: '',
    extractionType: '',
    shopModes: '',
})

const columns: SearchProps[] = [
    {
        label: '店铺ID',
        prop: 'no',
        labelWidth: 60,
        valueType: 'copy',
        fieldProps: {
            placeholder: '请输入店铺ID',
            maxlength: 20,
        },
    },
    {
        label: '店铺名称',
        prop: 'name',
        valueType: 'copy',
        fieldProps: {
            placeholder: '请输入店铺名称',
            maxlength: 20,
        },
    },
    {
        label: '状态',
        prop: 'status',
        valueType: 'select',
        options: [
            {
                value: '',
                label: '全部',
            },
            {
                value: 'NORMAL',
                label: '正常',
            },
            {
                value: 'FORBIDDEN',
                label: '禁用',
            },
        ],
        fieldProps: {
            placeholder: '请选择',
        },
    },
    {
        label: '提佣类型',
        prop: 'extractionType',
        valueType: 'select',
        options: [
            {
                value: '',
                label: '全部',
            },
            {
                value: 'CATEGORY_EXTRACTION',
                label: '类目提佣',
            },
            {
                value: 'ORDER_SALES_EXTRACTION',
                label: '订单金额提佣',
            },
        ],
        fieldProps: {
            placeholder: '请选择',
        },
    },
    {
        label: '店铺类型',
        prop: 'shopType',
        valueType: 'select',
        options: [
            {
                value: '',
                label: '全部',
            },
            {
                value: 'SELF_OWNED',
                label: '自营',
            },
            {
                value: 'PREFERRED',
                label: '优选',
            },
            {
                value: 'ORDINARY',
                label: '普通',
            },
        ],
        fieldProps: {
            placeholder: '请选择',
        },
    },
    {
        label: '经营模式',
        prop: 'shopModes',
        valueType: 'select',
        options: [
            {
                value: '',
                label: '全部',
            },
            {
                value: 'COMMON',
                label: '线上模式',
            },
            {
                value: 'O2O',
                label: 'O2O模式',
            },
        ],
        fieldProps: {
            placeholder: '请选择',
        },
    },
]

const searchHandle = () => {
    $emit('searchParams', searchForm)
}
const resetHandle = () => {
    Object.keys(searchForm).forEach((key) => {
        // @ts-ignore
        searchForm[key] = ''
    })
    searchHandle()
}
</script>
<style scoped lang="scss">
.shop__search-visible {
    padding: 20px 20px 0 20px;
}
</style>
